<template>
  <el-card>
      <el-row class="card1" type="flex" justify="space-around">
        <el-col align="center">
          <el-card class="card2 bg0">
            <div class="bb0">
            <h2>当月成交量</h2>
            <div>9999</div>
            </div>
            <i class="b0"></i>
          </el-card>
        </el-col>
        <el-col align="center">
          <el-card class="card2 king">
            <div class="bb0">
            <h2>当月销冠</h2>
            <div>汪树槐</div>
            </div>
            <i class="b0"></i>
          </el-card>
        </el-col>
        <el-col align="center">
          <el-card class="card2 bg1">
            <div class="bb0">
            <h2>本月绩效</h2>
            <div>100套</div>
            </div>
            <i class="b0"></i>
          </el-card>
        </el-col>
        <el-col align="center">
          <el-card class="card2 bg3">
            <div class="bb0">
            <h2>客户管理</h2>
            <div>客户数：1000</div>
            </div>
            <i class="b0"></i>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
</template>

<script>
export default {

}
</script >

<style lang="scss" scoped>
.card1 {
  .card2 {
    height: 320px;
    width: 258px;
    color: #000;
    h2,
    div {
      z-index: 99;
    }
  }
}
.bg0 {
  background-image: url("~@/assets/bg0.png");
  background-size: 100%;
  position: relative;
}
.bb0{
   background: rgba(255, 255, 255, 0.7);
   height: 100%;
   width: 100%;
   border-radius: 5px;
}
.b0 {
  background: rgba(255, 255, 255, 0.269);
  height: 320px;
  width: 258px;
  position: absolute;
  left: -2px;
  top: -2px;
  opacity: 1;
}
.b0:hover{
  // display: none;
  opacity: 0;
  transition:all 1s
}
.bg1 {
  background-image: url("~@/assets/bg1.png");
  background-size: 100%;
  position: relative;
}
.bg3 {
  background-image: url("~@/assets/bg3.png");
  background-size: 100%;
  position: relative;
}
.king {
  background-image: url("~@/assets/king.png");
  background-size: 100%;
  position: relative;
}
</style>